import {useEffect} from 'react';
import moment from "moment";
import {connect} from 'react-redux';
import {Text, View} from '@tarojs/components';
import {AtTabs, AtTabsPane} from 'taro-ui';
import {Empty, Tag} from '@nutui/nutui-react-taro';
import './index.scss'

function Recharge(props) {
  const {dispatch, myCoupons, currentCouPonType} = props;
  useEffect(() => {
    dispatch({
      type: 'stations/getMyCoupons'
    })
  }, [dispatch]);
  function changeCurrent(val){
    dispatch({
      type: 'stations/upState',
      payload: {
        currentCouPonType: val
      }
    })
  }
  function couponCard(i, index) {
    const {
      operationType = '',
      createTime = '',
      tradingBalance = '',
    } = i;
    return (
        <View className='couponItem' key={index}>
          <div className='couponLeftTag'>{i.couponObject === 1 ? '服务费' : '电费'}</div>
          <div className='couponCardItem'>
            <div className='couponLeft'>
              {
                i.couponType === 1 ? <div style={{whiteSpace: 'nowrap'}}><span className='value'>¥{i.couponAmount || ''}</span></div>
                    : <div style={{whiteSpace: 'nowrap'}}><Text className='value'>{i.couponAmount || ''}<Text className='unit'>折</Text></Text> </div>
              }
              <div className='desc'>
                {
                    `${i.conditionsAstrict ? i.conditionsAstrict === 1 ? `电费满${i.astrictAmount || ''}元可用` : `充电量满${i.astrictAmount || '' }度可用` : ''}` }
              </div>
            </div>
            <div className='couponLine' />
            <div className='couponCenter'>
              <div className='name'>{i.couponName}</div>
              <div className='validityTime'>{i.couponValidityType === 1 ? `${i.validityTime || ''}到期` : `领取后${i.validityTime || ''}天内可用`}</div>
            </div>
            {i.status === 10 ? <div className='rightTag'> <Tag type='success'>生效中</Tag></div> :
                i.status === 20 ? <div className='rightTag'> <Tag type='warning'>已使用</Tag></div> :
                    <div className='rightTag'> <Tag background='#999999' color='white'>已过期</Tag></div>
            }
          </div>
        </View>
    )
  }

  const tabList = [{title: '生效中'}, {title: '已使用'}, {title: '已过期'}]
  return (
    <View>
      <AtTabs current={currentCouPonType} tabList={tabList} onClick={(val) => changeCurrent(val)}>
        <AtTabsPane current={currentCouPonType} index={0} className='couponsWrap'>
          <View className='coupons'>
            {
              myCoupons && myCoupons.length && myCoupons.filter((l) => l.status === 10).length ? myCoupons.filter((l) => l.status === 10).map((i, index) => couponCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} description='暂无数据' />
            }
          </View>
        </AtTabsPane>
        <AtTabsPane current={currentCouPonType} index={1} className='couponsWrap'>
          <View className='coupons'>
            {
              myCoupons && myCoupons.length && myCoupons.filter((l) => l.status === 20).length ? myCoupons.filter((l) => l.status === 20).map((i, index) => couponCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} description='暂无数据' />
            }
          </View>
        </AtTabsPane>
        <AtTabsPane current={currentCouPonType} index={2} className='couponsWrap'>
          <View className='coupons'>
            {
              myCoupons && myCoupons.length && myCoupons.filter((l) => l.status === 30).length ? myCoupons.filter((l) => l.status === 30).map((i, index) => couponCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} description='暂无数据' />
            }
          </View>
        </AtTabsPane>
      </AtTabs>
    </View>
  )
}

export default connect(({
                          stations: {
                            myCoupons = [],
                            currentCouPonType = 0
                          } = {}
}) => {
  return {
    myCoupons,
    currentCouPonType
  }
})(Recharge)
